<!DOCTYPE html>
<html>
<head>
    <title>RL Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="450" height="300"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // --- Drawing Styles ---
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Component Coordinates & Dimensions ---
        const bat_x_neg = 90;
        const bat_x_pos = 110;
        const bat_y_center = 150;
        const bat_pos_len = 80;
        const bat_neg_len = 40;

        const top_y = 70;
        const bottom_y = 230;
        const right_x = 380;

        const inductor_x_start = 160;
        const inductor_width = 120;
        const inductor_x_end = inductor_x_start + inductor_width;

        const resistor_x_end = 280;
        const resistor_width = 100;
        const resistor_x_start = resistor_x_end - resistor_width;

        const ammeter_x = 320;
        const ammeter_radius = 20;

        const switch_x = right_x;
        const switch_y_top = 110;
        const switch_y_bottom = 150;

        // --- Draw Wires ---
        ctx.beginPath();
        // Top wire
        ctx.moveTo(bat_x_pos, bat_y_center - bat_pos_len / 2);
        ctx.lineTo(bat_x_pos, top_y);
        ctx.lineTo(inductor_x_start, top_y);
        // Wire after inductor
        ctx.moveTo(inductor_x_end, top_y);
        ctx.lineTo(switch_x, top_y);
        // Right wire (around switch)
        ctx.lineTo(switch_x, switch_y_top);
        ctx.moveTo(switch_x, switch_y_bottom); // Start wire after switch gap
        ctx.lineTo(switch_x, bottom_y);
        // Bottom wire
        ctx.lineTo(ammeter_x + ammeter_radius, bottom_y);
        ctx.moveTo(ammeter_x - ammeter_radius, bottom_y);
        ctx.lineTo(resistor_x_end, bottom_y);
        // Wire after resistor is drawn with the resistor
        ctx.moveTo(resistor_x_start, bottom_y);
        ctx.lineTo(bat_x_neg, bottom_y);
        // Left wire
        ctx.lineTo(bat_x_neg, bat_y_center + bat_neg_len / 2);
        ctx.stroke();

        // --- Draw Components ---

        // Battery
        ctx.beginPath();
        ctx.moveTo(bat_x_pos, bat_y_center - bat_pos_len / 2);
        ctx.lineTo(bat_x_pos, bat_y_center + bat_pos_len / 2);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(bat_x_neg, bat_y_center - bat_neg_len / 2);
        ctx.lineTo(bat_x_neg, bat_y_center + bat_neg_len / 2);
        ctx.stroke();

        // Inductor (Coil)
        ctx.beginPath();
        const num_loops = 5;
        const loop_radius = inductor_width / (2 * num_loops);
        ctx.moveTo(inductor_x_start, top_y);
        for (let i = 0; i < num_loops; i++) {
            ctx.arc(inductor_x_start + (2 * i + 1) * loop_radius, top_y, loop_radius, Math.PI, 0);
        }
        ctx.lineTo(inductor_x_end, top_y); // Ensure the path is continuous for stroking
        ctx.stroke();

        // Resistor (Zig-zag)
        ctx.beginPath();
        const zig_h = 12;
        ctx.moveTo(resistor_x_start, bottom_y);
        ctx.lineTo(resistor_x_start + resistor_width * 0.15, bottom_y);
        ctx.lineTo(resistor_x_start + resistor_width * 0.3, bottom_y + zig_h);
        ctx.lineTo(resistor_x_start + resistor_width * 0.5, bottom_y - zig_h);
        ctx.lineTo(resistor_x_start + resistor_width * 0.7, bottom_y + zig_h);
        ctx.lineTo(resistor_x_start + resistor_width * 0.85, bottom_y);
        ctx.lineTo(resistor_x_end, bottom_y);
        ctx.stroke();

        // Ammeter
        ctx.beginPath();
        ctx.arc(ammeter_x, bottom_y, ammeter_radius, 0, 2 * Math.PI);
        ctx.stroke();

        // Switch
        ctx.beginPath();
        ctx.moveTo(switch_x, switch_y_top);
        ctx.lineTo(switch_x + 30, switch_y_top + 30);
        ctx.stroke();

        // --- Draw Labels ---
        ctx.font = '20px sans-serif';

        // Battery Label
        ctx.textAlign = 'left';
        ctx.font = 'italic 24px serif';
        ctx.fillText('\u03BE', 20, bat_y_center);
        ctx.font = '16px sans-serif';
        ctx.textBaseline = 'top';
        ctx.fillText('bat', 34, bat_y_center + 4);
        ctx.font = '20px sans-serif';
        ctx.textBaseline = 'middle';
        ctx.fillText('= 12 v', 65, bat_y_center);

        // Inductor Label
        ctx.textAlign = 'center';
        ctx.fillText('L = 5.0 H', inductor_x_start + inductor_width / 2, top_y - 25);

        // Resistor Label
        ctx.fillText('R = 10 \u03A9', resistor_x_start + resistor_width / 2, bottom_y + 28);

        // Ammeter Label
        ctx.font = '24px sans-serif';
        ctx.fillText('A', ammeter_x, bottom_y);

        // Switch Label
        ctx.font = '22px sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText('S', right_x - 15, switch_y_top - 15);
    </script>
</body>
</html>